<template>
  <div class="app-container">
    <el-row class="clearfix">
      <el-button
        type="primary"
        icon="el-icon-download"
        plain
        @click="downloadFile"
      >
        下载收缴模板
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-upload2"
        plain
        @click="uploadVisible = true"
      >
        上传收缴清单
      </el-button>
      <el-form class="fr" inline :model="formInline">
        <el-form-item label="月份">
          <el-select
            v-model="formInline.djCostTime"
            clearable
            placeholder="选择月份"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="item in costTimeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="党组织机构">
          <el-select
            v-model="formInline.djDeptName"
            clearable
            placeholder="选择党组织机构"
          >
            <el-option label="全部" value="" />
            <el-option
              v-for="item in costDeptList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="月份" align="center" prop="djCostTime" />
      <el-table-column label="党组织机构" align="center" prop="djDeptName" />
      <el-table-column label="应缴人数" align="center" prop="perSonCount" />
      <el-table-column label="应缴总金额" align="center" prop="djCostValue" />
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="viewDetail(scope.row)"
          >
            查看党费详情
          </el-button>
          <el-button
            size="mini"
            type="danger"
            plain
            @click="removeCost(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-drawer
      size="65%"
      title="党费详情"
      :visible.sync="drawer.visible"
      :wrapper-closable="false"
    >
      <div style="padding: 0 20px">
        <el-button type="primary" plain @click="add">新增</el-button>
        <div style="padding: 10px" />
        <el-table
          v-loading="drawer.listLoading"
          :data="drawer.tableData"
          style="width: 100%"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            label="用户工号"
            align="center"
            prop="djUserNum"
            width="90"
          />
          <el-table-column
            label="党组织机构"
            align="center"
            prop="djDeptName"
          />
          <el-table-column label="党员姓名" align="center" prop="djUserName" />
          <el-table-column
            label="应缴党费月份"
            align="center"
            prop="djCostTime"
          />
          <el-table-column
            label="应缴党费金额"
            align="center"
            prop="djCostValue"
          />
          <el-table-column label="操作" align="center" width="160">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="edit(scope.row.djCostId)"
              >
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                plain
                @click="remove(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px" />
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :current-page="drawer.pageNum"
          :page-size="drawer.pageSize"
          :total="drawer.total"
          @size-change="onDrawerPageSizeChange"
          @current-change="onDrawerCurrentPageChange"
        />
      </div>
    </el-drawer>

    <el-dialog
      width="350px"
      :visible.sync="show"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="8em">
        <el-form-item label="党组织机构">
          <el-input v-model="form.djDeptName" disabled />
        </el-form-item>
        <el-form-item label="党员姓名" prop="djUserName">
          <el-select
            v-model="form.djUserName"
            style="width: 100%"
            placeholder="请选择党员"
            @change="changeUser"
          >
            <el-option
              v-for="item in costUserList"
              :key="item.userName"
              :value="item.userName"
              :label="item.userName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应缴党费时间" prop="djCostTime">
          <el-input v-model="form.djCostTime" disabled />
        </el-form-item>
        <el-form-item label="应缴党费金额" prop="djCostValue">
          <el-input-number
            style="width: 100%"
            v-model="form.djCostValue"
            controls-position="right"
            :min="0"
            :precision="2"
          />
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button @click="show = false">关 闭</el-button>
          <el-button type="primary" @click="submit">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="400px"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-date-picker
          v-model="djCostTime"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月份"
        />
        <el-upload
          class="upload"
          :data="{ djCostTime }"
          :headers="upload.headers"
          :action="upload.action"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCostDeptOption,
  getCostTimeOption,
  getCostPage,
  deleteCost,
  getCostUserPage,
  getCostUserOption,
  getCostUserDetail,
  addCostUser,
  editCostUser,
  deleteCostUser,
} from "@/api2/partyManage";
import { getToken } from "@/utils/auth";

const base_url = process.env.VUE_APP_BASE_APITwo;

export default {
  data() {
    return {
      tableData: [],
      listLoading: true,
      upload: {
        headers: { Authorization: getToken(), platform: 'WEB' },
        action: base_url + "/web/dj/cost/uploadDjCostExcel",
      },
      formInline: {},
      costDeptList: [],
      costTimeList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      uploadVisible: false,
      djCostTime: "",
      drawer: {
        visible: false,
        tableData: [],
        listLoading: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        djCostTime: "",
        djDeptName: "",
      },
      show: false,
      title: "",
      form: {},
      rules: {
        djUserName: [
          { required: true, message: "党员姓名不能为空", trigger: "change" },
        ],
        djCostValue: [
          { required: true, message: "应缴党费金额不能为空", trigger: "blur" },
        ],
      },
      costUserList: [],
    };
  },
  created() {
    this.getOption();
    this.getList();
  },
  methods: {
    async getCostDeptData() {
      const res = await getCostDeptOption();
      this.costDeptList = res.data;
    },
    async getCostTimeData() {
      const res = await getCostTimeOption();
      this.costTimeList = res.data;
    },
    getOption() {
      Promise.all([this.getCostDeptData(), this.getCostTimeData()]);
    },
    getList() {
      this.listLoading = true;
      getCostPage({
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((data) => {
        this.listLoading = false;
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    onPageSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    onCurrentPageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    downloadFile() {
      let a = document.createElement("a");
      a.href = "./static/党费收缴模板.xls";
      a.download = "党费收缴模板.xls";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      // window.location.href =
      //   base_url + `/web/dj/cost/downloadTemplate?Authorization=${getToken()}`;
    },
    beforeUpload(rawFile) {
      if (!this.djCostTime) {
        this.$message.error("请先选择要上传的月份!");
        return false;
      }
      const isLt10M = rawFile.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("文件大小限制在 10MB 内!");
        return false;
      }
    },
    handleSuccess(res) {
      if (res.code === 0) {
        this.$message.success("文件上传成功");
        this.uploadVisible = false;
        this.getList();
      } else if (res.code != 0 && res.msg) {
        this.$message.error(res.msg);
      } else {
        this.$message.error("上传失败，请重试！");
      }
    },
    async removeCost({ djCostTime, djDeptName }) {
      this.$confirm("是否删除此数据?", {
        type: "warning",
      })
        .then(async () => {
          await deleteCost({ djCostTime, djDeptName });
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    async viewDetail({ djCostTime, djDeptName }) {
      this.drawer.visible = true;
      this.form.djDeptName = djDeptName;
      this.form.djCostTime = djCostTime;
      this.getDrawerList();

      const res = await getCostUserOption({ djDeptName });
      this.costUserList = res.data;
    },
    async getDrawerList() {
      this.drawer.listLoading = true;
      const params = {
        pageNum: this.drawer.pageNum,
        pageSize: this.drawer.pageSize,
        djCostTime: this.form.djCostTime,
        djDeptName: this.form.djDeptName,
      };
      const res = await getCostUserPage(params);
      this.drawer.tableData = res.data;
      this.drawer.total = res.total;
      this.drawer.listLoading = false;
    },
    onDrawerPageSizeChange(val) {
      this.drawer.pageSize = val;
      this.drawer.pageNum = 1;
      this.getDrawerList();
    },
    onDrawerCurrentPageChange(val) {
      this.drawer.pageNum = val;
      this.getDrawerList();
    },
    add() {
      this.title = "新增";
      this.show = true;
      this.resetForm();
      this.$delete(this.form, "djCostId");
    },
    async edit(djCostId) {
      this.title = "编辑";
      this.show = true;
      const res = await getCostUserDetail({ djCostId });
      this.form = res.data;
    },
    changeUser(val) {
      const arr = this.costUserList.filter((item) => item.userName === val);
      this.form.djUserNum = arr[0].uid;
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const {
            djCostId,
            djDeptName,
            djUserName,
            djUserNum,
            djCostTime,
            djCostValue,
          } = this.form;
          const params = {
            djCostId,
            djDeptName,
            djUserName,
            djUserNum,
            djCostTime,
            djCostValue,
          };
          if (djCostId) {
            await editCostUser(params);
            this.$message.success("修改成功");
          } else {
            await addCostUser(params);
            this.$message.success("新增成功");
          }
          this.show = false;
          this.getList();
          this.getDrawerList();
        }
      });
    },
    resetForm() {
      if (!this.$refs.form) return;
      this.$refs.form.resetFields();
    },
    remove(row) {
      this.$confirm("是否删除名称为 " + row.djUserName + " 的数据项?", {
        type: "warning",
      })
        .then(async () => {
          await deleteCostUser(row.djCostId);
          this.$message.success("删除成功");
          this.getList();
          this.getDrawerList();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.upload {
  display: inline-block;
  margin-left: 15px;
}
</style>
